<template>
  <div class="home">
    <h2>表格</h2>
    <HotTable
      id="example"
      :data="tableData"
      :columns="columns"
      :config="config"
      @onFilterShow="onFilterShow"
      @onFilter="onFilter"
      @onSort="onSort"
      :filterItems="filterItems"
    />
    <button @click="updateTableData">更新表格数据</button>
    <button @click="updateIsSort">禁用排序配置</button>
  </div>
</template>

<script>
import tableData from './data';
import HotTable from '../components/HotTable';

export default {
  name: 'Home',
  components: { HotTable },
  data() {
    return {
      tableData,
      filterItems: ['1', '2', '3', '4'],
      columns: [
        {
          data: 'id',
          type: 'numeric', // 数据类型
          width: 40,
          colHeader: 'ID', // 标题
        },
        {
          data: 'flag',
          colHeader: 'Country',
        },
        {
          data: 'currencyCode',
          type: 'text',
          colHeader: 'Code',
        },
        {
          data: 'currency',
          type: 'text',
          colHeader: 'Currency',
        },
        {
          data: 'level',
          type: 'numeric',
          numericFormat: {
            pattern: '0.0000',
          },
          colHeader: 'Level',
        },
        {
          data: 'units',
          type: 'text',
          colHeader: 'ID',
        },
        {
          data: 'asOf',
          type: 'date',
          dateFormat: 'MM/DD/YYYY',
          colHeader: 'Units',
        },
        {
          data: 'onedChng',
          type: 'numeric',
          numericFormat: {
            pattern: '0.00%',
          },
          colHeader: 'Change',
        },
      ],
      config: {
        maxRows: 50, // 最大行数
        filters: true, // 表头过滤
        // dropdownMenu: true, // 表头下拉菜单 不含过滤
        dropdownMenu: [''],

        // contextMenu: true, // 右键菜单
        // manualRowResize: true, // 改变行高
        // manualColumnResize: true, // 改变列宽
        // mergeCells: true, // 合并单元格
        // 拖动 行/列
        manualRowMove: true,
        manualColumnMove: true,

        // 固定 行/列
        // fixedRowsTop: 2,
        // fixedRowsBottom: 2,
        // fixedColumnsLeft: 3,

        exportFile: true, // 导出

        // 折叠列
        collapsibleColumns: true,
        hiddenColumns: true,

        beforeDropdownMenuSetItems: items => {
          console.log('beforeDropdownMenuSetItems', items);
        },

        beforeFilter() {
          console.log('beforeFilter', arguments);
          const menu = document.querySelector('.htMenu.htDropdownMenu.handsontable');
          console.log(menu);
        },
        afterFilter() {
          console.log('afterFilter', arguments);
          const menu = document.querySelector('.htMenu.htDropdownMenu.handsontable');
          console.log(menu);
        },
      },
    };
  },

  methods: {
    onFilterShow(column) {
      console.log('onFilterShow', column);
    },
    // 点击确定进行筛选
    onFilter({ column, filters }) {
      console.log('onFilter', filters);
      this.tableData = [...this.tableData];
    },

    updateTableData() {
      this.tableData.forEach(v => {
        v.flag = '中国';
      });
    },

    // 禁用排序
    updateIsSort() {
      this.config.multiColumnSorting = {
        indicator: false, // 排序
        headerAction: false,
      };
    },

    onSort(sort) {
      console.log('onSort', sort);
      if (sort.length === 0) {
        console.log('平序');
      } else if (sort[0].sortOrder === 'asc') {
        console.log('升序');
        this.tableData = [];
      } else if (sort[0].sortOrder === 'desc') {
        console.log('降序');
        this.tableData = tableData;
      }
    },
  },
};
</script>
